<template>
  <f7-page @page:afterin="init">
    <f7-navbar :title="$t('m.selectAddress')" back-link=" "></f7-navbar>
    <ul>
      <li v-for="(item, index) in addressList" :key="index" @click="setWithdrawAddress(item)"><span v-if="item.tag">{{item.tag + "："}}</span>{{item.address}}</li>
    </ul>

    <div class="content-padding">
      <f7-button fill color="blue" large :href="`/add-withdrawal-address/?id=${$f7route.query.id}`">{{$t('m.addNewAddress')}}</f7-button>
    </div>
  </f7-page>
</template>

<script>
  import { getUserWithdrawAddress } from "../api/home";

  export default {
    name: "withdrawal-address",
    data() {
      return {
        addressList: []
      }
    },
    methods: {
      init() {
        getUserWithdrawAddress({ currency_id: this.$f7route.query.id }).then(res => {
          this.addressList = res.data;
        })
      },
      setWithdrawAddress(item) {
        this.$store.commit('setWithdrawAddress', item);
        this.$f7router.back();
      }
    }
  }
</script>

<style scoped lang="scss">
  ul {
    li {
      background: #fff;
      text-align: center;
      padding: $padding20 0;
      margin-top: $padding20;
    }
    margin-bottom: 50px;
  }
</style>
